<template>
  <el-input
    class="ipt"
    placeholder="请输入地点"
    v-model="address"
    @keyup.enter="addressSearch"
  />
  <el-button type="primary" class="btn" @click="addressSearch">查询</el-button>
  <el-button type="primary" class="btn" @click="removeSearch">取消</el-button>
  <div id="popup1">
    <div class="title">
      事件详情信息
      <button class="btn-close" @click="handleClose">×</button>
    </div>

    <table v-if="eventTitle">
      <thead>
        <tr>
          <th>{{ eventTitle[1] }}</th>
          <td>{{ eventContent[1] }}</td>
        </tr>
        <tr>
          <th>{{ eventTitle[3] }}</th>
          <td>{{ eventContent[3] }}</td>
        </tr>
        <tr>
          <th>{{ eventTitle[4] }}</th>
          <td>{{ eventContent[4] }}</td>
        </tr>
        <tr>
          <th>{{ eventTitle[7] }}</th>
          <td>{{ eventLevel(eventContent[7]) }}</td>
        </tr>
      </thead>
    </table>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { queryByAddress, removeSearch } from './hooks/useQueryByAddress'
// import { docLayer } from '../Map/Hooks/useGuangguMap'

let address = ref()
// 绑定事件，根据地点查询事件
let map = ref()
onMounted(() => {
  map.value = useGlobalMap()
})

let eventTitle = ref(null)
let eventContent = ref(null)
function addressSearch() {
  queryByAddress(map.value, address.value)
  map.value.on('click', function (evt) {
    //判断当前单击处是否有要素，捕获到要素时弹出popup
    var feature = map.value.forEachFeatureAtPixel(
      evt.pixel,
      function (feature, layer) {
        return feature
      }
    )
    if (feature) {
      let event = feature.values_.values_
      eventTitle.value = Object.keys(event)
      eventContent.value = Object.values(event)
      var position = feature.getGeometry().flatCoordinates
      window.addEventListener('click', handleMap)
      setTimeout(() => {
        window.removeEventListener('click', handleMap)
      }, 100)
    }
  })

  function handleMap(evt) {
    var { pageX, pageY } = evt
    let popup = document.querySelector('#popup1')
    popup.style.display = 'block'
    popup.style.left = pageX - 100 + 'px'
    popup.style.top = pageY - 75 + 'px'
  }
}
function handleClose() {
  let popup = document.querySelector('#popup1')
  popup.style.display = 'none'
}
const eventLevel = computed(() => {
  return (status) => {
    if (status) {
      if (status === '0') {
        return '未处理'
      } else if (status === '1') {
        return '处理中'
      } else {
        return '已处理'
      }
    }
  }
})
// 展示
</script>

<style scoped>
@import url('./style/EvebtPop.css');
</style>
